<template>
    <view>
        <view v-if="house_info.default_broker" class="page-foot">
            <view class="footbox">
                <view class="df ac js foot1">
                    <view class="df ac">
                        <image :lazy-load="true" :src="house_info.default_broker.user.avatar" class="footavatar" mode="aspectFill"></image>
                        <view>
                            <view class="name">{{ house_info.default_broker.user.nickname }}</view>
                            <view class="fs24 col89">
                                服务
                                <text class="colf8">{{ house_info.default_broker.user.service_num }}</text>
                                人
                            </view>
                        </view>
                    </view>
                    <view class="df ac">
                        <button @tap="addAppointLog" data-type="2" data-subtype="0" class="btn1">留电咨询</button>
                        <!-- <button @tap="jumpToChat" class="btn2">立即微聊</button> -->
						<button open-type="contact" class="btn2">立即微聊</button>
                    </view>
                </view>
            </view>
        </view>
		<view v-else class="page-foot bgf">
			<view class="footbox">
				<button @tap="bindPhoneCall" :data-tel="house_info.cosult_tel ? house_info.cosult_tel : house_info.platform_contact_tel" class="contactkefu flex-box flex-between">
					<image src="/static/icon/icon_kefubg.png" class="kefubg"></image>
					<view class="tl">
						<view class="fs40 pb10">{{ house_info.cosult_tel ? house_info.cosult_tel : house_info.platform_contact_tel }}</view>
						<view class="fs24">拨打热线，免费提供专属楼盘分析</view>
					</view>
					<image src="/static/icon/icon_tel.png" class="tel"></image>
				</button>
			</view>
		</view>

        <view class="container">
            <view class="examplebox">
                <image :lazy-load="true" :src="building_image" class="img_rankdetail" mode="aspectFill"></image>
            </view>
            <swiper v-if="building_data.length > 0" class="siwper" @change="swiperchange" :current="current" circular>
                <template v-for="(item, index) in building_data"  >
                    <swiper-item>
                        <view class="detailbox">
                            <view class="df ac pb20">
                                <view class="df ac flex-grow-1">
                                    <view class="num">{{ item.name }}</view>
                                    <view class="sale_type1">{{ item.sale_state_text }}</view>
                                </view>
                                <view>{{ index + 1 }}/{{ building_count }}</view>
                            </view>
                            <view class="fs26 pb10">
                                <text class="col89">开盘时间：</text>
                                {{ item.opentime_text }}
                            </view>
                            <view class="fs26 pb10">
                                <text class="col89">交房时间：</text>
                                {{ item.deliverytime_text }}
                            </view>
                            <view class="df ac pb10">
                                <view class="flex-grow-1 fs26">
                                    <text class="col89">单元数：</text>
                                    {{ item.unit_num }}个
                                </view>
                                <view class="flex-grow-1 fs26">
                                    <text class="col89">总户数：</text>
                                    {{ item.apartment_num }}户
                                </view>
                            </view>
                            <view class="df ac">
                                <view class="flex-grow-1 fs26">
                                    <text class="col89">层数：</text>
                                    {{ item.floor_num }}个
                                </view>
                                <view class="flex-grow-1 fs26">
                                    <text class="col89">剩余套数：</text>
                                    {{ item.remain_apartment_num }}套
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                </template>
            </swiper>

            <view class="df ac js title">
                <view class="fs34">该楼栋户型({{ layoutList.total }})</view>
            </view>

            <view class="houselist">
                <template v-if="layoutList.total > 0">
                    <template v-for="(item, index) in layoutList.data"  >
                        <navigator :url="'/pages/house/huxing_detail/huxing_detail?id=' + item.id"   class="houseitem df">
                            <view class="houseimg">
                                <image v-if="item.images_arr.length > 0" :lazy-load="true" :src="item.images_arr[0]" mode="aspectFill"></image>
                                <image v-else :lazy-load="true" src="" mode="aspectFill"></image>
                            </view>
                            <view class="flex-grow-1">
                                <view class="df ac pb10">
                                    <view class="housename single-line flex-grow-1">{{ item.name }}</view>
                                    <view class="sale_type1">{{ item.sale_state_text }}</view>
                                </view>
                                <view class="area-size">建面：{{ item.space }}㎡</view>
                                <view class="housecost">
                                    <text class="fs24 col89">参考总价：</text>
                                    约
                                    <text class="fs34">{{ item.total_price }}</text>
                                    万
                                </view>
                            </view>
                        </navigator>
                    </template>
                    <template v-if="layoutList.current_page >= layoutList.last_page && layoutList.total > 5">
                        <view class="fs30 col9 tc">数据加载完毕</view>
                    </template>
                </template>
                <template v-else>
                    <image :lazy-load="true" src="/static/static/images/none-data.png" class="none-data-style"></image>
                    <view class="fs28 col9 tc">暂无数据</view>
                </template>
            </view>
        </view>
        <!-- 预约弹窗start -->
        <u-popup :show="popupStatus" mode="center" round="8" @close="closePopupStatus" closeOnClickOverlay>
        	<view class="zixun-pop">
        		<template v-if="appoint_type == 1 && appoint_subscribe_type == 2">
        			<view class="fs40 black tc mb20">订阅楼盘开盘通知</view>
        			<view class="fs30 col-darkGray tc mb40">
        				<view>楼盘总是悄无声息的开盘？</view>
        				<view>一键订阅，让您抢占买房先机！</view>
        			</view>
        		</template>
        		<template v-else-if="appoint_type == 1 && appoint_subscribe_type == 1">
        			<view class="fs40 black tc mb20">订阅价格变动通知</view>
        			<view class="fs30 col-darkGray tc mb40">
        				<view>价格变动这么快？订阅价格变动通知</view>
        				<view>涨价降价我们将第一时间通知您，帮您找准买房时机！</view>
        			</view>
        		</template>
        		<template v-else-if="appoint_type == 1 && appoint_subscribe_type == 3">
        			<view class="fs40 black tc mb20">订阅实时动态通知</view>
        			<view class="fs30 col-darkGray tc mb40">
        				<view>价格变动这么快？订阅价格变动通知</view>
        				<view>涨价降价我们将第一时间通知您，帮您找准买房时机！</view>
        			</view>
        		</template>
        		<template v-else-if="appoint_type == 3 && appoint_subscribe_type == 0">
        			<view class="fs40 black tc mb20">免费专车看房</view>
        			<view class="fs30 col-darkGray tc mb40">
        				<view>公交太累，打车太贵，看房团还要等位</view>
        				<view>佳和房产带您免费专车看房，省时，省力，还包来回！</view>
        			</view>
        		</template>
        		<template v-else-if="appoint_type == 2 && appoint_subscribe_type == 0">
        			<view class="fs40 black tc mb20">我要咨询</view>
        			<view class="fs30 col-darkGray tc mb40">
        				<view>该项目有哪些优劣势？性价比如何？</view>
        				<view>还有什么类似楼盘推荐……</view>
        				<view>更多问题，咨询师帮你答疑解惑</view>
        			</view>
        		</template>
        		<view class="input-box flex-box plr30 mb40" v-if="popupStatus"><input @input="appoint_mobileFun"
        				:value="appoint_mobile" class="input flex-grow-1" type="number" placeholder="请输入手机号码"
        				placeholder-style="color:#ccc;" /></view>
        		<view @tap="submitAppointLog" class="btn1 mb30">确认</view>
        		<!-- <view @tap="jumpToChat" :data-uid="broker_user_id" class="btn2 mb20">立即微聊</view> -->
						<button open-type="contact" class="btn2">立即微聊</button>
        	</view>
        </u-popup>
        <!-- 预约弹窗end -->
        <!-- 预约成功弹窗start -->
        <u-popup :show="reserveStatus" mode="center" closeable :safeAreaInsetBottom="false" @close="closeReserveStatus">
        	<view class="reserve">
        		<image src="/static/icon/icon_reserve.png" class="icon_reserve"></image>
        		<view class="title1">预约成功</view>
        		<view class="title2">用手机号码{{ appoint_mobile_text }}预约了咨询服务，稍后经纪人将为您解答疑问，请注意接听电话</view>
        		<button @tap="closeReserveStatus" class="reserve-btn1">好的</button>
        		<!-- <button @tap="jumpToChat" :data-uid="broker_user_id" class="reserve-btn2">立即微聊</button> -->
				<button open-type="contact" class="btn2">立即微聊</button>
        	</view>
        </u-popup>
        <!-- 预约成功弹窗end -->
	</view>
</template>

<script>
const app = getApp();

const functions = require('../../../utils/functions.js');

export default {
    data() {
        return {
            popupStatus: false,

            //订阅咨询预约弹窗
            reserveStatus: false,

            //预约成功弹窗
            // 预约订阅类型
            appoint_type: 1,

            //分类:1=订阅动态,2=留电咨询,3=领取免费专车,4=帮你找房,5=咨询房价走势
            // 订阅分类
            appoint_subscribe_type: 0,

            //订阅通知类型:0=无订阅,1=订阅变价通知,2=订阅开盘通知,3=订阅实时动态
            // 预约手机号
            appoint_mobile: '',

            appoint_mobile_text: '',
            broker_user_id: 0,
            house_info: null,
            house_id: 0,
            house_building_id: 0,

            // 轮播的楼栋列表
            building_data: [],

            building_count: 0,
            building_image: '',

            // 户型列表
            layoutList: {
                total: 0,
                current_page: 0,
                last_page: 1,
                data: []
            },

            //默认第一号楼
            current: 0,


            user: {
                avatar: '',
                nickname: '',
                service_num: ''
            }
        };
    },
    onLoad: function (options) {
        let that = this;
        this.house_id=options.house_id || 0
        this.initData();
    },
    onPullDownRefresh: function () {
        uni.showNavigationBarLoading(); //在标题栏中显示加载

        var that = this; //模拟加载

        setTimeout(function () {
            that.initData();
            uni.stopPullDownRefresh(); //停止下拉刷新
        }, 1500);
    },
    onReachBottom: function () {
        if (  this.layoutList.current_page >=   this.layoutList.last_page) {
            // functions.toast('已加载到底部了');
            return false;
        } else {
            this.getLayoutList();
        }
    },
	methods: {
        jumpToChat(e) {
        	var uid = e.currentTarget.dataset.uid || 0;
        
        	if (!uid) {
        		if (this.house_info.default_broker) {
        			uid = this.house_info.default_broker.user_id;
        		} else {
        			uid = 0;
        		}
        	}
        
        	var that = this;
        	functions.checkLogin(function(ret) {
        		if (ret) {
        			functions.jumpToChat(uid, that.house_info.id);
        		} else {
        			functions.toast('请先登录');
        		}
        	});
        },
		addAppointLog(e) {
			var uid = e.currentTarget.dataset.uid || 0;
			
			if (!uid) {
				if (this.house_info.default_broker) {
					uid = this.house_info.default_broker.user_id;
				} else {
					uid = 0;
				}
			} 
			this.appoint_type= e.currentTarget.dataset.type;
			this.appoint_subscribe_type= e.currentTarget.dataset.subtype;
			this.broker_user_id= uid; 
			// 处理手机号码
			this.appoint_mobile= uni.getStorageSync('mobile') || this.appoint_mobile;
			this.popupStatus=true;
		},
        
        appoint_mobileFun(e) {
        	this.appoint_mobile = e.detail.value
        },
        
        // 提交预约日志
        submitAppointLog() {
        	var that = this;
        	if (that.appoint_mobile.length != 11) {
        		functions.toast('请输入正确的手机号');
        		return false;
        	}
        	functions.checkLogin(function(ret) {
        		if (ret) {
        			var appoint_mobile = uni.getStorageSync('mobile');
        			that.appoint_mobile = appoint_mobile;
        
        			functions.submitAjaxData(
        				that,
        				'/api/xiluhouse/house/create_appoint_log', {
        					type: that.appoint_type,
        					subscribe_type: that.appoint_subscribe_type,
        					mobile: that.appoint_mobile,
        					broker_user_id: that.broker_user_id,
        					city: that.now_city,
        				},
        				function(res) {
        					that.appoint_mobile = that.appoint_mobile;
        					that.appoint_mobile_text = appoint_mobile.substr(0, 3) + '****' +
        						appoint_mobile.substr(7);
        					that.reserveStatus = true;
        					that.popupStatus = false;
        				}
        			);
        		} else {
        			functions.toast('请先登录');
        		}
        	});
        },
        
        closePopupStatus() {
        	this.popupStatus = false;
        },
        closeReserveStatus() {
        	this.reserveStatus = false;
        },
        
        // 拨打电话
        bindPhoneCall(e) {
        	var tel = e.currentTarget.dataset.tel;
        	functions.phoneCall({
        		phoneNumber: tel //仅为示例，并非真实的电话号码
        	});
        },
        swiperchange(e) {
            var index = e.detail.current;
            var building_data =   this.building_data;
            this.current=index
            this.house_building_id=building_data[index].id
            this.layoutList.current_page=0
            this.getLayoutList();
        },

        // 获取列表信息
        getLayoutList: function () {
            var that = this;
            var json = {
                house_id: that.house_id,
                house_building_id:   this.house_building_id
            };
            json.page = Number(that.layoutList.current_page) + 1;

            if (json.page > 1 && that.layoutList.current_page >= that.layoutList.last_page) {
                functions.toast('已加载到底部了');
                return false;
            }
            functions.getAjaxList(that, '/api/xiluhouse/House/house_layout_list', json, function (res) {
                var layoutList = res.data;

                if (json.page > 1) {
                    var now_layoutList_data = that.layoutList.data || [];
                    var now_layoutList_data = now_layoutList_data.concat(layoutList.data);
                    layoutList.data = now_layoutList_data;
                }

                that.layoutList=layoutList
            });
        },

        // 获取所有可下拉刷新更新的数据
        initData: function () {
            var that = this; // 获取---搜索数据

            functions.getAjaxData(
                '/api/xiluhouse/house/house_building_info',
                {
                    house_id: that.house_id
                },
                function (res) {
                    that.house_info=res.data.house_info;
                    that.building_data=res.data.building_data;
                    that.building_count=res.data.building_count;
                    that.building_image=res.data.building_image

                    if (res.data.building_data.length > 0) {
                        that.house_building_id=res.data.building_data[0].id
                        that.layoutList.current_page=0
                        that.getLayoutList();
                    }
                }
            );
        }
    }
};
</script>
<style>
@import url('@/static/css/old_project.css');
.examplebox {
    width: 750rpx;
    height: 500rpx;
    position: relative;
}
.examplebox .img_rankdetail {
    width: 750rpx;
    height: 500rpx;
}
.examplebox .target {
    padding: 0 15rpx;
    border-radius: 6rpx;
    background: #0091ff;
    color: #fff;
    font-size: 20rpx;
    position: absolute;
    line-height: 45rpx;
    height: 45rpx;
}
.examplebox .target::after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10rpx;
    border-top: 6rpx solid #0091ff;
    border-right: 6rpx solid transparent;
    border-bottom: 6rpx solid transparent;
    border-left: 6rpx solid transparent;
}
.examplebox .target.active {
    background-color: #ff7b40;
}
.examplebox .target.active::after {
    border-top-color: #ff7b40;
}

.siwper {
    width: 100%;
    height: 390rpx;
}
.detailbox {
    padding: 30rpx;
    border-radius: 10rpx;
    box-shadow: 0rpx 4rpx 30rpx rgba(184, 189, 202, 0.3);
    background: #ffffff;
    width: 600rpx;
    margin: 43rpx 0;
}
.detailbox .num {
    font-size: 30rpx;
    margin-right: 22rpx;
}
.detailbox:first-child {
    margin-left: 40rpx;
}

.title {
    padding: 0 40rpx 33rpx;
    font-size: 34rpx;
    color: #101010;
}
.title .navigator {
    font-size: 24rpx;
    color: #898989;
    height: 46rpx;
    line-height: 46rpx;
}

.houselist {
    padding: 0 40rpx 0;
}
.houselist .houseitem {
    padding-bottom: 30rpx;
}
.houselist .houseitem .houseimg {
    width: 240rpx;
    height: 190rpx;
    border-radius: 10rpx;
    margin-right: 20rpx;
    position: relative;
    overflow: hidden;
}
.houselist .houseitem .houseimg image {
    width: 240rpx;
    height: 190rpx;
    position: relative;
    z-index: 1;
}
.houselist .houseitem .houseimg .top {
    width: 70rpx;
    height: 35rpx;
    background: linear-gradient(180deg, #f0dec0, #dcba8c);
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-size: 20rpx;
    z-index: 2;
    text-align: center;
    line-height: 35rpx;
}
.houselist .housename {
    font-size: 30rpx;
    padding-bottom: 10rpx;
}
.houselist .area-size {
    font-size: 24rpx;
    color: #898989;
    padding-bottom: 10rpx;
}
.houselist .targetbox {
    padding: 14rpx 0 0;
}
.houselist .targetitem {
    padding: 2rpx 4rpx;
    background: #cce9ff;
    font-size: 18rpx;
    color: #0091ff;
    border-radius: 2rpx;
    margin-right: 10rpx;
    margin-bottom: 12rpx;
}
.houselist .housecost {
    color: #f8532f;
    font-size: 24rpx;
}

.footbox button {
    font-weight: normal;
    padding: 0;
    margin: 0;
}
.footbox {
    background-color: #fff;
}
.footavatar {
    width: 75rpx;
    height: 75rpx;
    border-radius: 50%;
    margin-right: 15rpx;
}
.footbox .name {
    font-size: 32rpx;
    line-height: 43rpx;
}
.footbox .btn1 {
    width: 190rpx;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 74rpx;
    color: #fff;
    font-size: 30rpx;
    font-weight: normal;
    height: 74rpx;
    border-radius: 10rpx;
    background: #0091ff;
    box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
}
.footbox .btn2 {
    width: 190rpx;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 74rpx;
    color: #fff;
    font-size: 30rpx;
    font-weight: normal;
    height: 74rpx;
    border-radius: 10rpx;
    background: #ff7b40;
    margin-left: 15rpx;
    box-shadow: 0px 4rpx 40rpx rgba(248, 103, 56, 0.3);
}

.footbox .icon_search {
    width: 32rpx;
    height: 32rpx;
    margin-bottom: 6rpx;
}
.footbox .icon_tel2 {
    width: 36rpx;
    height: 36rpx;
    margin-bottom: 9rpx;
}

.footbox .conbtn1 {
    width: 150rpx;
    border-right: 1px solid #f4f3f3;
    font-size: 24rpx;
    color: #333;
}
.footbox .conbtn2 {
    width: 150rpx;
    font-size: 24rpx;
    color: #333;
}

.footbox .foot2 {
    height: 100rpx;
    background-color: #fff;
    padding-right: 40rpx;
}
.footbox .foot1 {
    height: 100rpx;
    background-color: #fff;
}

.footbox .icon_search {
    width: 32rpx;
    height: 32rpx;
    margin-bottom: 6rpx;
}
.footbox .icon_tel2 {
    width: 36rpx;
    height: 36rpx;
    margin-bottom: 9rpx;
}

.footbox .conbtn1 {
    width: 150rpx;
    border-right: 1px solid #f4f3f3;
    font-size: 24rpx;
    color: #333;
}
.footbox .conbtn2 {
    width: 150rpx;
    font-size: 24rpx;
    color: #333;
}

.footbox .foot2 {
    height: 100rpx;
    background-color: #fff;
    padding-right: 40rpx;
    border-top: 1px solid #f6f7fa;
}
.footbox .foot1 {
    height: 100rpx;
    background-color: #fff;
    padding: 0 40rpx;
}

.pop {
    width: 100%;
    background-color: #fff;
    padding: 0 40rpx 30rpx;
}
.pop .pop-title1 {
    padding: 20rpx 0 0;
    text-align: center;
    font-size: 40rpx;
}
.pop .pop-title2 {
    padding: 23rpx 0 40rpx;
    text-align: center;
    font-size: 30rpx;
    color: #333;
    line-height: 42rpx;
}
.pop .pop-input {
    height: 90rpx;
    padding: 0 30rpx;
    border-radius: 10rpx;
    background: #f6f7fa;
    font-size: 30rpx;
}
.pop .pop-btn1 {
    height: 90rpx;
    border-radius: 10rpx;
    background: #0091ff;
    box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
    width: 100%;
    color: #fff;
    font-size: 30rpx;
    font-weight: normal;
    margin-top: 40rpx;
    margin-left: 0;
    margin-right: 0;
    line-height: 90rpx;
    padding: 0;
}

.pop .pop-btn2 {
    height: 90rpx;
    border-radius: 10rpx;
    background: #ff7b40;
    box-shadow: 0px 4rpx 40rpx rgba(248, 103, 56, 0.3);
    width: 100%;
    color: #fff;
    font-size: 30rpx;
    font-weight: normal;
    margin-top: 40rpx;
    margin-left: 0;
    margin-right: 0;
    line-height: 90rpx;
    padding: 0;
}

.pop-title3 {
    padding: 20rpx 30rpx 0;
    color: #898989;
    font-size: 24rpx;
}

.custom-class {
    border-radius: 8rpx;
    overflow: hidden;
}

.reserve {
    background-color: #fff;
    padding: 10rpx 40rpx 30rpx;
    text-align: center;
}
.reserve .icon_reserve {
    width: 120rpx;
    height: 120rpx;
    margin: 0 0 40rpx;
}
.reserve .title1 {
    font-size: 40rpx;
    padding-bottom: 23rpx;
}
.reserve .title2 {
    font-size: 30rpx;
    color: #333;
    line-height: 42rpx;
    padding: 0 20rpx 20rpx;
}

.reserve .reserve-btn1 {
    height: 90rpx;
    border-radius: 10rpx;
    background: #0091ff;
    box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
    width: 100%;
    color: #fff;
    font-size: 30rpx;
    font-weight: normal;
    margin-top: 40rpx;
    margin-left: 0;
    margin-right: 0;
    line-height: 90rpx;
    padding: 0;
}

.reserve .reserve-btn2 {
    height: 90rpx;
    border-radius: 10rpx;
    background: #ff7b40;
    box-shadow: 0px 4rpx 40rpx rgba(248, 103, 56, 0.3);
    width: 100%;
    color: #fff;
    font-size: 30rpx;
    font-weight: normal;
    margin-top: 30rpx;
    margin-left: 0;
    margin-right: 0;
    line-height: 90rpx;
    padding: 0;
}


	.footbox button {
		font-weight: normal;
		padding: 0;
		margin: 0;
	}

	.footbox {
		background-color: #fff;
		padding:0 40rpx;
		box-sizing:border-box;
	}

	.footbox button.contactkefu {
		width: 100%;
		height: 150rpx;
		border-radius: 15px;
		position: relative;
		padding-left: 150rpx;
		color: var(--blue);
	}

	.footbox .kefubg {
		position: absolute;
		width: 670rpx;
		height: 150rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.footbox .contactkefu .tel {
		width: 90rpx;
		height: 90rpx;
	}

</style>
